<template>
    <div>用户列表:
        <br>
        <ul>
            <li v-for="i in userlist">
                <el-button @click="check_users(i.id)">{{i.name}}</el-button>
            </li>
        </ul>
        消息列表：<br>
        <ul>
        <li v-for="i in messagelist">
           {{ i.mes }}
        </li>
        </ul>
        <el-input type="text" v-model="mes" placeholder="请输入消息"></el-input>
        <el-button @click="send">发送</el-button>
    </div>
    
    
    
    
    
    </template>
    
    <script setup>
    import { ref,onMounted } from 'vue'
    import { useRouter } from 'vue-router'
    const router = useRouter()
    const userid=1001
    const socket = ref(null)
    const usersocket=ref(null)
    const puser=ref(null)
    
    const userlist=ref([])
    const messagelist=ref([])
    const mes=ref()
    
    const webdict=ref([])
    const hisdict=ref([])
    
    const check_users=(userid)=>{
        //判断puser.value是否为空，如果为空
        //如果不为空用puser.value作为key,用消息列表messagelist作为value把上一个的消息存储
        //hisdict[puser.value] = JSON.stringify(messagelist)
        //从hisdict查询userid的历史消息，如果存在 messagelist.value=JSON.parse(),
        //如果没有
        messagelist.value=[]
        puser.value=userid
        if(webdict.value.indexOf(userid)>=0){
            console.log("存在")
       }else{
           //创建客户与当前用户聊天的房间
           usersocket.value=new WebSocket("ws://localhost:8000/room/"+userid+"/")
               usersocket.value.onopen=(event)=>{
                   console.log("连接成功")
               }
           }
       }
    
    const send=()=>{
       usersocket.value.send(JSON.stringify({
         "mes":mes.value,
         "to":puser.value  
       },
       mes.value="",
    ))
       
    
       //回调函数，客户端接收服务端消息
       usersocket.value.onmessage=(event)=>{
           messagelist.value.push(JSON.parse(event.data))
       }
    
    }
    
    const initwesocket=()=>{
        const room=userid
        socket.value=new WebSocket("ws://localhost:8000/room/"+room+"/")
        //客户端与服务端建立连接
        socket.value.onopen=(event)=>{
            console.log("连接成功")
        }
        //回调函数，客户端接收服务端消息
        socket.value.onmessage=(event)=>{
            const udata=JSON.parse(event.data)
            var flag=true
            userlist.value.forEach((user)=>{
                if(user['id']==udata['id']){
                    flag=false
                }
            })
            if(flag){
                userlist.value.push(udata)
        }
    }}
    
    onMounted(()=>{
        initwesocket()
       
    })
    
    
    
    
    
    
    </script>